<template>
    <div class="echarts" ref="echart1" style="width:100%;height: 500px;"></div>
</template>

<script>
import {getCurrentInstance, onMounted, ref, watch, defineEmits, reactive, toRefs} from "vue";

export default {
  props:['dataSource'],
  setup(){
    const { proxy } = getCurrentInstance();
    //监视数据变化后重新进行绘图
    watch(proxy.$props,()=>{
      option.series[0].data=[]
      option.series[0].links=[]//初始化
      for (let j = 0; j < proxy.$props.dataSource.length;) {
        let datasourceKey = proxy.$props.dataSource[j]
        let namedata = [] //name属性合集

        console.log('datasourceKey',datasourceKey)
        for (let i = 0; i < datasourceKey.split("-").length;) {
          // 每次遍历name属性放入数组中
          for (let k = 0; k < option.series[0].data.length; k++) {
              namedata.push(option.series[0].data[k].name)
          }
          //判断新放入的数据name属性是否已经存在
          // 关系图中name属性不能重复
          if (!namedata.includes(datasourceKey.split("-")[i])){
            //首尾节点固定位置
            if (j == 0 && i ==0){
              option.series[0].data.push({name:datasourceKey.split("-")[i],category:i.toString(),fixed:true,x:200,y:250})
            }else {
              if (j == 0 && i == datasourceKey.split("-").length-1){
                option.series[0].data.push({name:datasourceKey.split("-")[i],category:i.toString(),fixed:true,x:600,y:250})
              }else {
                option.series[0].data.push({name:datasourceKey.split("-")[i],category:i.toString()})
              }
            }
          }
          i = i+2
        }
        j +=1
      }
      console.log("1111",option.series[0].data)
      for (let j = 0; j < proxy.$props.dataSource.length;) {
        let datasourceKey = proxy.$props.dataSource[j]
        j+=1
        for (let i = 0; i < datasourceKey.split("-").length-1;) {
          option.series[0].links.push({source:datasourceKey.split("-")[i],target:datasourceKey.split("-")[i+2],name:datasourceKey.split("-")[i+1]})
          i = i+2
        }
      }
      console.log("222",option.series[0].links)
      rendeChart()
    })
    const option = reactive({
      toolbox:{
        show:true
      },
      symbolKeepAspect:true,
      backgroundColor: '#ffffff',
      color: [
        '#33a02c',
        '#80b1d3',
        '#d6604d',
        '#d6604d',
        // '#FA750FFF'
      ],
      title: {
        text: '',
        textStyle: {
          color: '#368cbf',
          fontWeight: 700,
          fontSize: 30,
          left: 'center'
        }
      }, // 标题及标题颜色、尺寸、位置
      legend: [ // 增加图示标签，我们可以点击图示隐藏相关节点
        {
          x: 'right',
          show: false,
          data: ['0', '2', '4','6']
        }],
      series: [
        {
          type: 'graph', // 类型设置为关系图
          legendHoverLink: true,  // 可以点击图例来隐藏一个组
          layout: 'force',
          categories: [
            { name: '0', symbolSize: 60 },
            { name: '2', symbolSize: 60 },
            { name: '4', symbolSize: 60 },
            { name: '6', symbolSize: 60 },
          ],
          force: {
            repulsion: [500, 600], //每个节点之间的斥力因子，越大离的越远
            layoutAnimation: true,
            friction: 0.05, //刷新时节点的移动速度，越大越快，0 - 1 之间
            edgeLength: [150, 180] //两节点之间的距离
          },

          label: {
            show: true, // 节点圆盘上的文字
            fontStyle: 'italic', //文字风格，normal，italic，oblique 三种可选
            fontSize: 12,
            color: '#000000',
          },
          symbolSize: 60, //全局节点尺寸
          itemStyle: {  // 给节点加上阴影，显着立体
            shadowColor: '#C0C0C0',
            shadowOffsetX: 2,
            shadowOffsetY: 2
          },
          //让节点可以通过鼠标拖拽和移动的设置
          roam: false, //开启鼠标平移及缩放
          draggable: true, //节点是否支持鼠标拖拽。
          edgeSymbol: ['circle', 'line'],//两节点连线的样式
          edgeSymbolSize: [5, 10],
          cursor: 'pointer', //鼠标悬浮时在图形元素上时鼠标的样式
          labelLayout: {
            moveOverlap: 'shiftX', //标签重叠时，挪动标签防止重叠
            draggable: true //节点标签是否允许鼠标拖拽定位
          },
          emphasis: {
            scale: true, //节点放大效果
            focus: 'adjacency'
          },
          lineStyle: {
            color: '#3d3d3f',
            width: 2,
            curveness: 0 //节点连线的曲率，0-1 越大越弯。
          },
          edgeLabel:{
            normal:{
              show: true,
              textStyle: {
                fontSize: 10
              },
              formatter: function (x) {
                return x.data.name;
              }

            }
          },
          data: [],
          links: []
        }
      ]

    })
    function rendeChart() {
      const myeChart = proxy.$echarts.init(proxy.$refs.echart1)
      myeChart.setOption(option)
    }
    return {
      ...toRefs(option)
    }
  },

}
</script>

<style scoped>

</style>